<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1,user-scalable=no">
    <script src="vue.min.js"></script>
    <style>
        .div{
            width: 100%;
            height: 50vh;
            background: red;
        }
        .btn{
            width: 20%;
            height: 10vw;
        }
    </style>
</head>
<body>
<div class="app">
    <!--.stop阻止冒泡事件-->
    <!--<div class="div" @click="divClick">-->
        <!--<input type="button" value="enter" class="btn" @click.stop="btnClick">-->
    <!--</div>-->

    <!--.prevent阻止默认行为-->
    <!--<a href="http://www.sina.com" @click.prevent="linkClick">看新闻，上新浪</a>-->

    <!--.capture实现捕获触发事件(顺序由外而里)-->
    <!--<div class="div" @click.capture ="divClick">-->
        <!--<input type="button" value="enter" class="btn" @click="btnClick">-->
    <!--</div>-->

    <!--.self，只有点击当前元素，才会触发的事件-->
    <div class="div" @click.self ="divClick">
        <input type="button" value="enter" class="btn" @click="btnClick">
    </div>

    <!--使用.once只触发一次方法行为-->
</div>

<script>
    let app=new Vue({
        el:'.app',
        data:{

        },
        methods:{
            divClick(){
                console.log('这是触发了divClick事件')
            },
            btnClick(){
                console.log('这是触发了btnClick事件')
            },
            linkClick(){
                console.log('这是触发了a标签链接事件')
            }
        }

    })
</script>
</body>
</html>